<script setup>
import CompDemo from './components/CompDemo.vue';
import ForDemo from './components/ForDemo.vue';
import HelloWorld from './components/HelloWorld.vue'
import WatchDemo from './components/WatchDemo.vue'
import KeyDemo from './components/KeyDemo.vue'
import CountButton from './components/CountButton.vue'
import ChangeMsg from './components/ChangeMsg.vue'
import { ref } from 'vue';
import SlotDemo from './components/SlotDemo.vue';
import SlotMultiDemo from './components/SlotMultiDemo.vue';
import ProvideInjectDemo from './components/ProvideInjectDemo.vue';
import LifeCycle from './components/LifeCycle.vue';
import ComputedDemo from './components/ComputedDemo.vue';

const info = ref('联想')

const changeMsgHandler = (value)=>{
  info.value = value
}

const lifeFlag = ref(true)
</script>

<template>
  <!-- <HelloWorld msg="Vite + Vue" /> -->
   <!-- <ForDemo /> -->
    <!-- <CompDemo/> -->
     <!-- <WatchDemo/> -->
     <!-- <KeyDemo/> -->
      <!-- <ChangeMsg :msg="info" @change-msg="changeMsgHandler"/>
    <SlotDemo>
      <h2>自定义内容</h2>
    </SlotDemo>
    <SlotDemo/> -->
    <!-- <SlotMultiDemo>
      <template v-slot:header>
        <h1>头部123</h1>
      </template>
      <template #main>
        <div>自定义主题</div>
      </template>
      <template #footer>
        <p>自定义页脚</p>
      </template>
    </SlotMultiDemo> -->
    <!-- <ProvideInjectDemo/> -->
     <!-- <LifeCycle v-show="lifeFlag"/>
     <button @click="lifeFlag = false">隐藏</button> -->
     <ComputedDemo/>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
